<script setup>
import { defineEmits, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import WebSocket from '@/components/websocket.vue'
const route = useRoute()
const router = useRouter()
const dataVal = reactive({
  navList: [
    { icon: "home", path: "Index", active: true },  // 首页（激活态）
    { icon: "1", path: "One", active: false },      // 第1个按钮
    { icon: "2", path: "Two", active: false },      // 第2个按钮
    { icon: "3", path: "Three", active: false },      // 第3个按钮
    { icon: "4", path: "Four", active: false },      // 第4个按钮
  ]
})
const active = ref(null)
const emit = defineEmits(['navClick'])
const handleClick = (item, index) => {
  console.log(dataVal.navList[index])
  active.value = index
  dataVal.navList[1].active = true
  const url = sessionStorage.getItem('loginType') === 'teachIndex' ? `teach${item.path}` : `student${item.path}`
  router.push(url)
}
watch(() => route.name,
  newVal => {
    dataVal.navList = dataVal.navList.map(a => {
      return a.active = a.path === newVal
    })

    console.info(dataVal.navList, '....')
  })
onMounted(() => {
  const name = sessionStorage.getItem('loginType') === 'teachIndex' ? route.name.slice(5, route.name.length) : route.name.slice(7, route.name.length)

  active.value = dataVal.navList.findIndex(a => { return a.path === name })

  console.info(active.value, '....')
})
</script>

<template>
  <div class="d-flex space-around  align-items-center tabBars">
    <div :class="['d-flex align-items-center justify-content-center step-icon-box', active === index ? 'active' : null]"
      v-for="(item, index) in dataVal.navList">
      <div class="d-flex align-items-center" @click="loginType === 'teachIndex' ? handleClick(item, index) : null">
        <img src="@/assets/img/icon-home.png" class="centered-image" v-if="item.icon === 'home'">
        <template v-else>{{ item.icon }}</template>
      </div>
    </div>
  </div>
  <WebSocket />
</template>

<style scoped lang='scss'>
.tabBars {
  width: 100%;
  height: 100px;
  padding: 0 40px;
  box-sizing: border-box;
  background-color: rgb(255, 255, 255, .5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  .step-icon-box {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #E9529426;
    font-family: DINPro;
    font-weight: 500;
    font-style: Medium;
    font-size: 54px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: justify;
    color: #E95294;
    box-sizing: border-box;

    &.active {
      background: #E95294;
      color: #fff;
    }

    &::after {
      position: absolute;
      content: '';
      width: 80px;
      height: 1px;
      margin-right: -250px;
      background-image: url("@/assets/img/line.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }

    &:last-child::after {
      display: none;
    }
  }
}

// 导航容器：横向布局，居中，固定底部
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 56px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

// 单个导航项：垂直布局，点击区域铺满
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20%;
  height: 100%;
  cursor: pointer;
  transition: all 0.2s;

  // 图标样式
  .nav-icon {
    font-size: 20px;
    color: #666;
    transition: color 0.2s;
  }

  // 文字样式
  .nav-text {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    transition: color 0.2s;
  }

  // 激活态样式（文字变色）
  &.active .nav-text,
  .active {
    color: #42b983;
  }

  // 点击反馈
  &:active {
    opacity: 0.8;
  }
}

// 响应式：小屏调整高度和字体
@media (max-width: 375px) {
  .bottom-nav {
    height: 50px;
  }

  .nav-icon {
    font-size: 18px;
  }

  .nav-text {
    font-size: 11px;
  }
}
</style>
